<!-- //修改交易密码 设置新的交易密码 -->
<template>
    <div >
        <div class="header">
            <van-nav-bar  title=""  left-text="" right-text="完成" left-arrow @click-left="back"  @click-right="sub" />
        </div>

        <van-cell class="text" :border="false" center title="修改交易密码" label="请设置新交易密码，用于支付验证" />

        <div class="inputBox">
            <!-- 密码输入框 -->
            <van-password-input
            :value="value"
            :length="6"
            :gutter="10"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
            />

            <!-- 数字键盘 -->
            <van-number-keyboard
            v-model="value"
            :show="showKeyboard"
            @blur="showKeyboard = false"
            />
        
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast,PasswordInput, NumberKeyboard  } from 'vant';
Vue.use(Toast,PasswordInput,NumberKeyboard);

import { mapMutations } from "vuex";

export default {
    name: "newTransactionPassword",
    components: {
      },
    data(){
        return{
            value: '',
            oldValue:'',  //从后端获取的交易密码
            showKeyboard: true,
            submit:false,    //密码长度需达到6才能提交
        }
    },
    created() {
        this.oldValue = this.$store.state.TransactionPassword
    },
    watch: {
      value(value) {
        if (value.length === 6) {
            this.submit=true
            console.log('可以提交密码给后台',value,this.submit);
        }else{
            this.submit=false
        }
      },
    },
    methods:{
        back() {
            this.$router.go(-1)
        },

        ...mapMutations(['setTransactionPassword']),
        sub(){   //交易密码设置完成跳转到账号与安全页面
            if(this.submit==true){
                this.setTransactionPassword(this.value)
                let that=this
              Toast({
                message:'设置成功',  //提示内容
                duration:1000,   //提示持续时间
                onClose() {    //提示结束后的回调函数
                    that.$router.push({ path:'/accounts'})  //这样用this将会指向toast  ，所以用that替代this将指向sub
                }
              })            
            }else{
                Toast('请输入密码');
            }
        }

        

    }
}
</script>

<style scoped>
    .text{
        font-size: 24px;
    }
    .btn{
    margin: 80px auto ;
    }
    .inputBox{
        margin: 50px auto ;
        width: 92%;
    }
    .forgotPassword{
    margin: 25px auto;
    text-align: center;
    color: #797979;
    font-size: 14px;
}
.van-password-input__security li{
        background-color: #f2f2f2;
    }





</style>
